<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="p-sm">
			此组件用于开发统一样式的组件，提供样式切换的可能性
		</view>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>compName</view>
				<view>String</view>
				<view>无</view>
				<view>组件名。指定所使用的预定义尺寸列表（通常不同组件的预定义尺寸都不一样）</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>无</view>
				<view>预定义尺寸，由上级组件传入</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>无</view>
				<view>主题，由上级组件传入。行为参照执行策略.xlsx</view>
			</view>
			<view class="tr">
				<view>control</view>
				<view>String, Array</view>
				<view>全部</view>
				<view>控制类型，可选background背景、border边框、text文字。可填单个字符串，或字符串数组</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色值，由上级组件传入，必须是颜色值格式。行为参照执行策略.xlsx</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定文字颜色值，不校验颜色值。行为参照执行策略.xlsx</view>
			</view>
			<view class="tr">
				<view>borderColor</view>
				<view>String</view>
				<view>无</view>
				<view>自定义边框色值，不校验颜色值。设置后边框颜色在所有状态下固定</view>
			</view>
			<view class="tr">
				<view>backgroundColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定背景颜色值，不校验颜色值。设置后背景颜色在所有状态下固定</view>
			</view>
			<view class="tr">
				<view>activeText</view>
				<view>String</view>
				<view>无</view>
				<view>激活时文字颜色值，不校验颜色值。设置后激活时文字使用该颜色值，但textColor优先</view>
			</view>
			<view class="tr">
				<view>hoverClass</view>
				<view>String</view>
				<view>无</view>
				<view>获得焦点时样式类名，应用全局样式或本组件内定义样式</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>Number, String, Array</view>
				<view>0</view>
				<view>圆角，需带单位，或0。非数组时为全角，可填circle半圆、square方。为数组时定义从左上角开始顺时针4个方向角</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>Number, String</view>
				<view>无</view>
				<view>
					自定义宽度，需带单位，或0。0或空等同于auto
				</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>Number, String</view>
				<view>无</view>
				<view>自定义高度，需带单位，或0。0或空等同于auto</view>
			</view>
			<view class="tr">
				<view>spaceInside</view>
				<view>Number, String, Array</view>
				<view>无</view>
				<view>自定义内边距，可定义四个方向边距</view>
			</view>
			<view class="tr">
				<view>display</view>
				<view>String</view>
				<view>block</view>
				<view>根节点显示类型</view>
			</view>
			<view class="tr">
				<view>borderWidth</view>
				<view>Number, String, Array</view>
				<view>0</view>
				<view>边框宽，默认单位px。为数组时定义从上开始顺时针4个方向边</view>
			</view>
			<view class="tr">
				<view>borderType</view>
				<view>String</view>
				<view>solid</view>
				<view>边框类型</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>镂空。行为参照执行策略.xlsx</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用。行为参照执行策略.xlsx</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读。行为参照执行策略.xlsx</view>
			</view>
			<view class="tr">
				<view>active</view>
				<view>Boolean</view>
				<view>false</view>
				<view>激活，复选框、开关类组件会使用到。行为参照执行策略.xlsx</view>
			</view>
			<view class="tr">
				<view>textHide</view>
				<view>Boolean</view>
				<view>false</view>
				<view>未激活时文字透明，复选框、开关类组件会使用到。行为参照执行策略.xlsx</view>
			</view>
			<view class="tr">
				<view>fixBorder</view>
				<view>Boolean</view>
				<view>false</view>
				<view>边框固定显示，取消禁用状态时的禁用色覆盖。行为参照执行策略.xlsx</view>
			</view>
			<view class="tr">
				<view>inline</view>
				<view>Boolean</view>
				<view>false</view>
				<view>调整为内联元素，宽度自动。关闭时默认宽度100%</view>
			</view>
			<view class="tr">
				<view>borderBox</view>
				<view>Boolean</view>
				<view>false</view>
				<view>等同于box-sizeing：border-box。开启圆角及使用边框时会用到，默认边框宽不计入圆角将导致不能得到完全的圆形</view>
			</view>
			<view class="tr">
				<view>overHide</view>
				<view>Boolean</view>
				<view>false</view>
				<view>slot区域超出隐藏。特殊情况使用</view>
			</view>
			<view class="tr">
				<view>basicBackground</view>
				<view>String, Boolean</view>
				<view>无</view>
				<view>基础背景色，在无主题或无自定主题色或未激活时，的默认背景色。为true时使用内置灰色，取自$vi-borColor-default。行为参照执行策略.xlsx内灰色部分。</view>
			</view>
			<view class="tr">
				<view>basicBorder</view>
				<view>String, Boolean</view>
				<view>无</view>
				<view>基础边框色，在无主题或无自定主题色或未激活时，的默认边框色。为true时使用内置灰色，取自$vi-borColor-default。行为参照执行策略.xlsx内灰色部分。</view>
			</view>
			<view class="tr">
				<view>basicText</view>
				<view>String, Boolean</view>
				<view>无</view>
				<view>基础文字色，在无主题或无自定主题色或未激活时，的默认文字色。为true时使用内置灰色，取自$vi-borColor-default。行为参照执行策略.xlsx内灰色部分。</view>
			</view>
			<view class="tr">
				<view>shadow</view>
				<view>String</view>
				<view>无</view>
				<view>阴影，格式同css的box-shadow</view>
			</view>
			<view class="tr">
				<view>forceClick</view>
				<view>Boolean</view>
				<view>false</view>
				<view>固定触发点击，无论禁用与否</view>
			</view>
			<view class="tr">
				<view>alignLeft</view>
				<view>String</view>
				<view>无</view>
				<view>变更外部对齐为居左。取消margin:auto</view>
			</view>
			<view class="tr">
				<view>@click</view>
				<view>事件</view>
				<view>	</view>
				<view>点击事件，无提交参数</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				使用slot可置入内容
			</view>
			<view class="">
				<vi-style-controller class="mr-sm"
					compName="checkbox"
					size="md"
					type="primary"
					radius="circle"
					:width="'1.2em'"
					:height="'1.2em'"
					:borderWidth="1"
					:plain="false"
					:disabled="false"
					:readOnly="false"
					inline
					:textHide="false"
					:active="false"
					:borderBox="true"
					:basicBorder="true"
					></vi-style-controller>
					
				<vi-style-controller class="mr-sm"
					compName="checkbox"
					size="md"
					type="primary"
					radius="circle"
					:width="'1.2em'"
					:height="'1.2em'"
					:borderWidth="1"
					:plain="true"
					:disabled="false"
					:readOnly="false"
					inline
					:textHide="false"
					:active="true"
					:borderBox="true"
					:basicBorder="true"
					></vi-style-controller>
					
				<vi-style-controller class="mr-sm"
					compName="checkbox"
					size="md"
					type="primary"
					radius="circle"
					:width="'1.2em'"
					:height="'1.2em'"
					:borderWidth="1"
					:plain="false"
					:disabled="false"
					:readOnly="false"
					inline
					:textHide="false"
					:active="true"
					:borderBox="true"
					:basicBorder="true"
					></vi-style-controller>
				
				<vi-style-controller class="mr-sm"
					compName="checkbox"
					size="md"
					type="primary"
					radius=""
					:width="'1.2em'"
					:height="'1.2em'"
					:borderWidth="1"
					:plain="false"
					:disabled="false"
					:readOnly="false"
					inline
					:textHide="false"
					:active="false"
					:borderBox="true"
					:basicBorder="true"
					></vi-style-controller>
				
				<vi-style-controller class="mr-sm"
					compName="checkbox"
					size="md"
					type="primary"
					radius=""
					:width="'1.2em'"
					:height="'1.2em'"
					:borderWidth="1"
					:plain="true"
					:disabled="false"
					:readOnly="false"
					inline
					:textHide="false"
					:active="true"
					:borderBox="true"
					:basicBorder="true"
					></vi-style-controller>
					
				<vi-style-controller class="mr-sm"
					compName="checkbox"
					size="md"
					type="primary"
					radius=""
					:width="'1.2em'"
					:height="'1.2em'"
					:borderWidth="1"
					:plain="false"
					:disabled="false"
					:readOnly="false"
					inline
					:textHide="false"
					:active="true"
					:borderBox="true"
					:basicBorder="true"
					></vi-style-controller>
				
				<vi-style-controller class="mr-sm"
					compName="checkbox"
					size="md"
					type="primary"
					radius=""
					:width="'3.2em'"
					:height="'1.2em'"
					:borderWidth="1"
					:plain="false"
					:disabled="false"
					:readOnly="false"
					inline
					:textHide="false"
					:active="false"
					:borderBox="true"
					:basicBorder="true"
					></vi-style-controller>
				
				<vi-style-controller class="mr-sm"
					compName="checkbox"
					size="md"
					type="primary"
					radius=""
					:width="'3.2em'"
					:height="'1.2em'"
					:borderWidth="1"
					:plain="true"
					:disabled="false"
					:readOnly="false"
					inline
					:textHide="false"
					:active="true"
					:borderBox="true"
					:basicBorder="true"
					></vi-style-controller>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
